<!-- Record.vue -->
<template>
  <view >
  	<!-- button 按钮式单选 -->
  	<wd-radio-group v-model="selectedType" shape="button" @change="handleSearch">
  	  <wd-radio 
		v-for="_ in [{ label: '全部', value: '' }, ...dictionaryStore.get('decoration_order_record_type')]" 
		:value="_.value"
		:key="_.value">
		{{ _.label }}
	  </wd-radio>
  	</wd-radio-group>
	<!-- 可滚动内容区域 -->
	<scroll-view 
	  class="scroll-content" 
	  scroll-y 
	  @scrolltolower="loadMore"
	  :scroll-top="scrollTop"
	>
	  <!-- table -->
	  <view v-if="paginationData.length">
	    <!-- 卡片 -->
	    <wd-card v-for="_ in paginationData" :key="_.id" >
		  <view class="card-item">
		    <view class="title">发送人</view>
		    <view class="content">{{ userStore.getUserNameById(_.creator) }}</view>
		  </view>
	      <view class="card-item">
	        <view class="title">发送内容</view>
	        <view class="content">{{ _.message }}</view>
	      </view>
	      <view class="card-item">
	        <view class="title">记录类型</view>
	        <view class="content">{{ dictionaryStore.analysis('decoration_order_record_type', _.messageType) }}</view>
	      </view>
	      <view class="card-item">
	        <view class="title">创建时间</view>
	        <view class="content">{{ dayjs(_.createTime).format('YYYY-MM-DD HH:mm:ss') }}</view>
	      </view>
	    </wd-card>
	    
	    <!-- 加载更多提示 -->
	    <view class="load-more">
	      <wd-loading v-if="loading" size="20px">加载中...</wd-loading>
	      <text v-if="noMoreData">没有更多数据了</text>
	    </view>
	  </view>
	  
	  <!-- 空状态 -->
	  <wd-status-tip v-else image="search" tip="暂无数据" />
	</scroll-view>
	<!-- 悬浮按钮 -->
	<wd-fab type="primary" position="right-bottom" :expandable="false" @click="handleCreate">
	</wd-fab>
  </view>
</template>
<script setup>
import dayjs from 'dayjs';	
import { ref, computed, watch, onMounted } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import {
  useDictionaryStore,
  useUserStore
} from '@/store/index.js'
import { orderMessageList } from '@/api/order/detail.js'
const props = defineProps({
  // 订单id
  orderId: {
    type: Number,
    required: true
  },
});

// 字典仓库
 const dictionaryStore = useDictionaryStore()
 // 用户仓库
 const userStore = useUserStore()
 // 选择的类型
 const selectedType = ref('');
 
const page = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const paginationData = ref([])
  const loading = ref(false)
  const noMoreData = ref(false)
  const scrollTop = ref(0)
// 获取回访列表
  const handleInitTable = async (isLoadMore = false) => {
    if (loading.value) return
    loading.value = true
    
    const params = { 
		orderId:props.orderId,
		messageType: selectedType.value,
		pageNo: page.value,
		pageSize: pageSize.value};
    
    try {
      const data = await orderMessageList(params)
      
      if (isLoadMore) {
        paginationData.value = [...paginationData.value, ...data.list]
      } else {
        paginationData.value = data.list
        // 搜索时回到顶部
        scrollTop.value = Math.random()
      }
      
      total.value = data.total
      noMoreData.value = paginationData.value.length >= total.value
    } catch (error) {
      uni.showToast({
        title: error.message || '获取数据失败',
        icon: 'error'
      })
    } finally {
      loading.value = false
    }
  }

  // 加载更多
  const loadMore = () => {
    if (noMoreData.value || loading.value) return
    page.value++
    handleInitTable(true)
  }
  // 搜索处理
  const handleSearch = () => {
    page.value = 1
    handleInitTable()
  }
  const handleCreate = () => {
	  uni.navigateTo({
		url: '/packageA/pages/order/createRecord?orderId='+props.orderId
	})
  }
// 刷新数据
const refreshData = () => {
  page.value = 1
  selectedType.value = ''
  handleInitTable()
}
onMounted(() => {
  handleInitTable();
   // 监听刷新事件
    uni.$on('refresh-record-list', refreshData)
});

	
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 300px);
  }
  
  .fixed-search {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
  }
  
  .scroll-content {
    height: 100vh;
    overflow-y: auto;
    padding: 10px;
	box-sizing: border-box;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE 和 Edge */
  }
  
  .load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color: #999;
    font-size: 14px;
  }
  
  	.card-item {
  		display: flex;
  		justify-content: space-between;
  		// align-items: center;
  		font-size: 28rpx;
  		color: #333333;
  		margin: 10rpx 0;
  		.title {
  			color: #a5a5a5;
        width: 150rpx;
        flex-shrink: 0;
  		}
      .content {
        flex: 1;
      }
  	}
	:deep(.wd-divider) {
		margin-top: 0;
	}
	:deep(.wd-card__footer) {
		padding-bottom: 4px;
	}
  
</style>